<template>
  <div class="task-card" shadow="hover">
    <el-row class="task-card-main" type="flex" justify="space-between">
      <el-row type="flex">
        <el-row class="task-card-content" type="flex">
          <h2 class="task-card-title">
            <el-tooltip class="item" effect="dark" :content="card.cardName" :disabled="!isCardNameOverflow" placement="top">
              <p :class="['task-card-name', card.enabled == 0 && 'task-card-enabled']" ref="parentNameWidth">
                <span ref="childNameWidth">{{ card.cardName }}</span>
              </p>
            </el-tooltip>
          </h2>
          <el-row class="task-card-others">
            <p>
              {{ $t('view.designer.rule.numberOfAdditions') }}：
              <span v-if="card.inputType == 'single'">{{ $t('common.base.onceTime') }}</span>
              <span v-else-if="card.inputType == 'multiple'">{{ $t('common.base.moreTime') }}</span>
            </p>
          </el-row>
        </el-row>
      </el-row>
    </el-row>

    <el-row class="project-card-opearte" type="flex">
      <!-- 连接器附加组件有编辑和重命名 没有预览 -->
      <template>
        <div class="connector-list-view-card-item-footer-left">
          <el-dropdown placement="top">
            <i class="icon-diandiandian iconfont">{{t('common.base.moreOperator')}}</i>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>
                <div  @click="$emit('editName', card)">
                  <i class="iconfont icon-edit-square"></i>
                  {{t('common.base.rename')}}
                </div>
              </el-dropdown-item>
              <el-dropdown-item>
                <div @click="handleDeleteCard">
                  <i class="iconfont icon-delete"></i>
                  {{t('common.base.delete')}}
                </div>
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
        <div class="project-card-opearte-del" @click="$emit('edit', card)">
        <i class="iconfont icon-edit-square">{{$t('common.base.edit')}}</i>
      </div>
      </template>
    </el-row>
  </div>
</template>

<script>
export default {
  name: 'card-item',
  props: {
    card: {
      type: Object,
      default: () => ({}),
    },
  },
  computed: {
  },
  data() {
    return {
      isCardNameOverflow: false,
    };
  },
  mounted() {
    this.initOverflow();
  },
  methods: {
    // 删除组件
    handleDeleteCard() {
      this.$confirm(this.$t('common.base.tip.areYouWantDeleteIt', {data1: this.card.cardName}), this.$t('common.base.toast'), {
        confirmButtonText: this.$t('common.base.makeSure'),
        cancelButtonText: this.$t('common.base.cancel'),
        type: 'warning',
      }).then(() => {
        this.$emit('deleteCard', this.card);
      });
    },
    // 初始化溢出tips
    initOverflow() {
      this.$nextTick(() => {
        this.isCardNameOverflow = this.$refs?.parentNameWidth?.offsetWidth < this.$refs?.childNameWidth?.offsetWidth;
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.task-card {
  //cursor: move;
  width: 358px;
  //height: 159px;
  background: #ffffff;
  border-radius: 4px;
  margin: 0 12px 12px 0;
  box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.04);
  &:hover {
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.12);
  }

  .task-card-main {
    height: calc(100% - 32px);
    padding: 16px 20px;
    .drag-icon {
      font-size: $font-size-small;
      display: none;
    }

    .task-card-content {
      flex-direction: column;
      justify-content: space-between;

      .task-card-title {
        display: flex;
        justify-content: flex-start;

        .task-card-name {
          max-width: 220px;
          line-height: 22px;
          margin: 0 12px 0 0;
          font-size: $font-size-large;
          @include text-ellipsis;
          word-break: break-all;
        }

        .task-card-enabled {
          max-width: 200px;
        }

        .task-card-disable {
          width: 54px;
          height: 22px;
          line-height: 22px;
          font-size: $font-size-small;
          font-weight: 500;
          text-align: center;
          color: #999999;
          background: rgba(153, 153, 153, 0.2);
          border: 1px solid rgba(191, 191, 191, 0.2);
          border-radius: 12px;
        }
      }

      .task-card-others {
        i {
          font-size: $font-size-small;
          color: $text-color-regular;
          &:hover {
            color: $color-primary;
          }
        }

        p {
          margin-bottom: 4px;
          font-size: $font-size-small;
          color: $text-color-regular;

          span {
            color: $text-color-primary;
            margin-right: 8px;
          }

          &:last-child {
            margin-bottom: 0;
          }

          .see-role {
            color: $color-primary;
          }
        }
      }
    }
  }
  .project-card-opearte {
    height: 32px;
    line-height: 32px;
    border-top: 1px solid $bg-color-l1;

    & > div {
      cursor: pointer;
      flex: 1;
      text-align: center;
      color: #999999;
      i {
        font-size: $font-size-small;
        &::before {
          margin-right: 8px;
        }
      }
    }

    .project-card-opearte-del {
      border-right: 1px solid $bg-color-l1;
      &:hover {
        color: $color-danger;
      }
    }

    .project-card-opearte-modify {
      &:hover {
        color: $color-primary;
      }
    }
  }

  &:hover {
    .drag-icon {
      display: block;
    }
  }
}

@media screen and (max-width: 1920px) {
  .task-card-item {
    width: calc(25% - 12px);
  }
}
@media screen and (max-width: 1680px) {
  .task-card-item {
    width: calc(33.3% - 12px);
  }
}
@media screen and (max-width: 1440px) {
  .task-card-item {
    width: 328px;
  }
}
</style>
